<template>
  <div class="box">
    <ul>
      <li v-for="(item, index) in list" :key="index" @click="cur($event)">
        <span :class="{ active: item == show }">{{ item }}</span>
      </li>
    </ul>
    <div>
      <a href="#" @click="sort($event)">升序(按新闻类型数量)</a>
      <a href="#" @click="sort($event)">降序(按新闻类型数量)</a>
    </div>
    <!-- 链接 -->
    <div class="btn">
      <p v-for="(item, index) in listArr">
        <a :href="item.href">{{ item.title }}</a>
      </p>
    </div>
  </div>
</template>

<script>
let json = [
  {
    title: "出现跑路，北京全面排查P2P风险",
    type: "互联网",
    href: "http://tech.163.com/14/0610/08/9UC5IJQE000915BF.html",
  },
  {
    title: "北京傍晚到夜间有雷阵雨 明天白天多云转晴",
    type: "国内",
    href: "http://news.hexun.com/2014-06-10/165566949.html",
  },
  {
    title: "“10亿美元俱乐部”的宠儿有哪些？",
    type: "互联网",
    href: "http://www.pingwest.com/2014-startups-with-billion-dollar-valuations/",
  },
  {
    title: "恒大官方宣布于汉超李学鹏加盟 制海报欢迎(图)",
    type: "体育",
    href: "http://sports.sina.com.cn/j/2014-06-10/19177202125.shtml",
  },
  {
    title: "外交部称美国是“黑客帝国”：地球人都知道",
    type: "互联网",
    href: "http://politics.caijing.com.cn/2014-06-10/114251776.html",
  },
  {
    title: "乌克兰卢甘斯克机场被关闭",
    type: "军事",
    href: "http://stock.sohu.com/20140610/n400627314.shtml",
  },
];
export default {
  name: "",
  components: {},
  data() {
    return {
      list: ["全部", "互联网", "国内", "体育", "军事"],
      listArr: json,
      show: "全部",
    };
  },
  created() {},
  mounted() {},
  methods: {
    cur(e) {
      // console.log(e);
      this.show = e.target.innerHTML;
      // console.log(e.target.innerHTML);
      if (e.target.innerHTML.includes("全部")) {
        this.listArr = json;
      } else {
        this.listArr = json.filter((item) => item.type.includes(this.show));
      }
    },
    // 排序
    sort(e) {
      // console.log(e);
      let count = {};
      for (const item of json) {
        const { type } = item;
        if (count[type]) {
          count[type]++;
        } else {
          count[type] = 1;
        }
      }
      this.listArr.forEach(res=>{
        // console.log(res);
        for(const i in count){
          if(res.type==i){
            this.$set(res,'num',count[i])
          }
        }
      })
      // 升序
      if(e.target.innerHTML.includes("升序")){
        this.listArr.sort((res,newRes)=>{
          // console.log(res,newRes);
          // console.log(res.num - newRes.num);
          return res.num - newRes.num
        })
      }else{
        // 降序
        this.listArr.sort((res,newRes)=>{
          // console.log(newRes.num-res.num);
          return newRes.num-res.num
        })
      }
     
    },
   
  },
};
</script>
<style scoped lang='scss'>
ul {
  display: flex;
  li {
    width: 100px;
    height: 100px;
    margin-left: 50px;
    margin-top: 30px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 100px;
  }
}
ul li span {
  display: block;
}
.btn {
  margin-top: 30px;
}
ul li .active {
  background: #ccc;
}
</style>
